<template>
    <div class="max">
      <div class="title">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
      </div>
      <div class="elForm">
        <el-form v-model="query.subjectID" label-width="20%">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="query.subjectID"
                  placeholder="请选择"
                  style="width: 100%"
                  @change="getDetail"
                >
                  <el-option
                    v-for="item in simpleDataList"
                    :key="item.id"
                    :label="item.subjectName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="query.catalogID"
                  placeholder="请选择"
                  style="width: 100%"
                  @change="onDirectoryChange"
                >
                  <el-option
                    v-for="(item, index) in directory"
                    :key="index"
                    :label="item.directoryName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select style="width: 100%" v-model="query.tags" placeholder="请选择" @change="onDirectoryChange">
                  <el-option v-for="(item, index) in tagList" :key="index" :label="item.tagName" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="query.keyword"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select style="width: 100%" v-model="query.questionType" placeholder="请选择" @change="onDirectoryChange">
                  <el-option v-for="(v, k, i) in questionType" :key="i" :label="v" :value="k"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select style="width: 100%" v-model="query.difficulty" placeholder="请选择" @change="onDirectoryChange">
                  <el-option v-for="(v, k, i) in difficulty" :key="i" :label="v" :value="k"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select style="width: 100%" v-model="query.direction" placeholder="请选择" @change="onDirectoryChange">
                  <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select style="width: 100%" v-model="query.creatorID" placeholder="请选择" @change="onDirectoryChange">
                  <el-option v-for="(item, index) in userList" :key="index" :label="item.username" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="query.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="query.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="city-box" label="城市">
                <el-select style="width : 50%" class="city-1" v-model="query.province" placeholder="请选择" @change="onProvinceChange">
                  <el-option v-for="(v, k, i) in province" :key="i" :label="v" :value="v"> </el-option>
                </el-select>

                <el-select style="width : 50%" class="city-2" v-model="query.city" placeholder="请选择" @change="onDirectoryChange">
                  <el-option v-for="(v, k, i) in citys" :key="i" :label="v" :value="v"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <div class="buttons">
                  <el-button size="mini" @click="clearAll">清除</el-button>
                  <el-button type="primary" size="mini" @click="getQuestionList">查询</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </template>
<script>
// 获取学科接口
import { list as subject } from '@/api/hmmm/subjects'
// 获取目录接口
import { list as directorydata } from '@/api/hmmm/directorys'
// 标签接口
import { list as tag } from '@/api/hmmm/tags'
// 录入人列表
import { list } from '@/api/base/users.js'
// 导入城市和区域/县
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  data () {
    return {
      // 查询信息
      query: {
        page: 1, // 否1当前页数
        pagesize: 5, // 每页显示多少  /** */
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题难度
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      },
      // 学科列表
      simpleDataList: [],
      // 二级目录列表
      directory: [],
      // 预览时传入子组件的试题
      questionItem: {},
      // 试题预览
      dialogVisible: false,
      // 数据总数
      counts: 0,
      // 题库列表
      questionList: [],
      // 区域列表
      citys: [],
      // 城市列表
      province: provinces(),
      // 标签列表
      tagList: [],
      // 录入人列表
      userList: [],
      // 方向
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      // 试题类型
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 难度
      questionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      }
    }
  },
  created () {
    // 获取学科列表
    this.getList()
    // 获取录入人列表
    this.getUserList()
    // 开始时调用展示所有基础数据
    this.getQuestionList()
  },
  methods: {
    // 学科列表
    getList () {
      subject({ page: 1, pagesize: 100 }).then((res) => {
        this.simpleDataList = res.data.items
      })
    },
    // 目录改变接口
    onDirectoryChange (val) {
      // 获取标签
      this.getTagList()
    },
    // 获取标签接口
    getTagList () {
      tag({ subjectID: this.query.subjectID }).then(res => {
        this.tagList = res.data.items
      })
    },
    // 获取录入人
    getUserList () {
      list({ page: 1, pagesize: 100, keyword: '' })
        .then(res => {
          this.userList = res.data.list
        })
    },
    // 当市发生改变时触发
    onProvinceChange (val) {
      this.query.city = ''
      this.citys = citys(val)
    },
    // 学科改变触发
    getDetail (val) {
      this.query.tags = null
      this.query.catalogID = null
      directorydata({ subjectID: val }).then((res) => {
        this.directory = res.data.items
      })
    },
    // 点击清除触发
    clearAll () {
      for (const key in this.query) {
        if (key === 'page' || key === 'pagesize') {
          continue
        }
        this.query[key] = null
      }
      this.tagList = this.directory = []
      // 更新题库列表
      this.getQuestionList()
    },
    // 点击确认获取
    getQuestionList () {
      this.$emit('done', this.query)
    }
  }
}
</script>
  <style scoped lang="scss">
  .max {
    .title {
      display: flex;
      justify-content: space-between;
      .explain {
        font-size: 12px;
        color: pink;
      }
    }
    .elForm {
      margin-top: 10px;
      .buttons {
        float: right;
      }
    }
  }
  </style>
